<template>
  <el-dialog
    title="高级筛选"
    :visible.sync="visible"
    :before-close="handleClose"
    width="60%"
  >
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="基本信息">
        <el-col :span="8">
          <el-form-item label="性别">
            <el-select
              v-model="form.region"
              class="form-min-input"
              placeholder="请选择活动区域"
            >
              <el-option
                v-for="(item, index) in xbOption"
                :key="index"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="年龄">
            <el-select
              v-model="form.region"
              class="form-min-input"
              placeholder="请选择活动区域"
            >
              <el-option
                v-for="(item, index) in nlOption"
                :key="index"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="收入">
            <el-select
              v-model="form.region"
              class="form-min-input"
              placeholder="请选择活动区域"
            >
              <el-option
                v-for="(item, index) in srOption"
                :key="index"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-form-item>

      <el-form-item>
        <el-col :span="12">
          <el-form-item label="成为客户时间" label-width="136px">
            <el-date-picker
              v-model="form.date1"
              type="datetime"
              placeholder="选择日期时间"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="成为会员时间" label-width="106px">
            <el-date-picker
              v-model="form.date1"
              type="datetime"
              placeholder="选择日期时间"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-form-item>
      <el-form-item label="交易信息">
        <el-col :span="12">
          <el-form-item label="最近消费时间" label-width="136px">
            <el-date-picker
              v-model="form.date1"
              type="datetime"
              placeholder="选择日期时间"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="当前积分" label-width="106px">
            <el-col :span="11">
              <el-input-number
                v-model="form.resource"
                :precision="0"
                :step="1"
                :controls="false"
                :min="0"
                size="medium"
              ></el-input-number>
            </el-col>
            <el-col class="line" :span="2">-</el-col>
            <el-col :span="11">
              <el-input-number
                v-model="form.resource"
                :precision="0"
                :step="1"
                :controls="false"
                :min="0"
                size="medium"
              ></el-input-number>
            </el-col>
          </el-form-item>
        </el-col>
      </el-form-item>
      <el-form-item>
        <el-col :span="12">
          <el-form-item label="当前余额" label-width="106px">
            <el-col :span="11">
              <el-input-number
                v-model="form.resource"
                :precision="0"
                :step="1"
                :controls="false"
                :min="0"
                size="medium"
              ></el-input-number>
            </el-col>
            <el-col class="line" :span="2">-</el-col>
            <el-col :span="11">
              <el-input-number
                v-model="form.resource"
                :precision="0"
                :step="1"
                :controls="false"
                :min="0"
                size="medium"
              ></el-input-number>
            </el-col>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="消费次数" label-width="106px">
            <el-col :span="11">
              <el-input-number
                v-model="form.resource"
                :precision="0"
                :step="1"
                :controls="false"
                :min="0"
                size="medium"
              ></el-input-number>
            </el-col>
            <el-col class="line" :span="2">-</el-col>
            <el-col :span="11">
              <el-input-number
                v-model="form.resource"
                :precision="0"
                :step="1"
                :controls="false"
                :min="0"
                size="medium"
              ></el-input-number>
            </el-col>
          </el-form-item>
        </el-col>
      </el-form-item>
      <el-form-item>
        <el-col :span="12">
          <el-form-item label="消费余额" label-width="106px">
            <el-col :span="11">
              <el-input-number
                v-model="form.resource"
                :precision="0"
                :step="1"
                :controls="false"
                :min="0"
                size="medium"
              ></el-input-number>
            </el-col>
            <el-col class="line" :span="2">-</el-col>
            <el-col :span="11">
              <el-input-number
                v-model="form.resource"
                :precision="0"
                :step="1"
                :controls="false"
                :min="0"
                size="medium"
              ></el-input-number>
            </el-col>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="充值次数" label-width="106px">
            <el-col :span="11">
              <el-input-number
                v-model="form.resource"
                :precision="0"
                :step="1"
                :controls="false"
                :min="0"
                size="medium"
              ></el-input-number>
            </el-col>
            <el-col class="line" :span="2">-</el-col>
            <el-col :span="11">
              <el-input-number
                v-model="form.resource"
                :precision="0"
                :step="1"
                :controls="false"
                :min="0"
                size="medium"
              ></el-input-number>
            </el-col>
          </el-form-item>
        </el-col>
      </el-form-item>
      <el-form-item>
        <el-col :span="12">
          <el-form-item label="充值金额" label-width="106px">
            <el-col :span="11">
              <el-input-number
                v-model="form.resource"
                :precision="0"
                :step="1"
                :controls="false"
                :min="0"
                size="medium"
              ></el-input-number>
            </el-col>
            <el-col class="line" :span="2">-</el-col>
            <el-col :span="11">
              <el-input-number
                v-model="form.resource"
                :precision="0"
                :step="1"
                :controls="false"
                :min="0"
                size="medium"
              ></el-input-number>
            </el-col>
          </el-form-item>
        </el-col>
      </el-form-item>
    </el-form>
    <span slot="footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="handleSumbit">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      form: {
        name: "",
        region: 1,
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: ""
      },
      xbOption: [
        { label: "不限", value: 1 },
        { label: "男", value: 2 },
        { label: "女", value: 3 }
      ],
      nlOption: [
        { label: "不限", value: 1 },
        { label: "18以上", value: 2 },
        { label: "18-24", value: 3 },
        { label: "25-30", value: 4 },
        { label: "31-35", value: 5 },
        { label: "36-40", value: 6 },
        { label: "40以上", value: 7 }
      ],
      srOption: [
        { label: "不限", value: 1 },
        { label: "5w以下", value: 2 },
        { label: "5-15w", value: 3 },
        { label: "15-30w", value: 4 },
        { label: "30w以上", value: 5 }
      ]
    };
  },
  methods: {
    handleClose() {
      this.$emit("outDialog", "showSenior", false);
    },
    handleSumbit() {
      this.$emit("outDialog", "showSenior", false);
    }
  }
};
</script>

<style lang="scss" scoped>
.line {
  text-align: center;
}
</style>
